<template>
    <div>
        <el-button @click="addEvent">添加事件</el-button><br />
            <el-tag v-for="(item, index) in store.styleItem.event" :key="index" style="margin-top: 10px;">
                <div>{{ item.type }}</div>
            </el-tag>


        <el-drawer v-model="drawerEvent" title="添加事件" direction='ltr' :before-close="handleClose">
            <el-tabs class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane v-for="(item, index) in eventList" :key="index" :label="item.label" :name="item.name">
                    <div v-if="index === 0">
                        <el-input v-model="textRedirect" :row="4" type="textarea" placeholder="请输入跳转地址" />
                        <el-button class="mt10" @click="eventSuccess('redirect')">确定</el-button>
                    </div>
                    <div v-else>
                        <el-input v-model="textAlert" :row="4" type="textarea" placeholder="请输入alert内容" />
                        <el-button class="mt10" @click="eventSuccess('alert')">确定</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { userToolbarStore } from '../../store';

const drawerEvent = ref(false)
const textRedirect = ref("")
const textAlert = ref("")
const store = userToolbarStore()

// 事件
const handleClick = (tab, event) => {
}

// 添加事件
const addEvent = () => {
    drawerEvent.value = true
}

const eventList = [
    {
        label: '跳转事件',
        name: 'redirect'
    },
    {
        label: 'alert事件',
        name: 'alert'
    }
]

const eventSuccess = (type) => {
    // 关闭抽屉
    drawerEvent.value = false
    store.addEvents({
        type,
        id: store.styleItem.id,
        val: type === 'redirect' ? textRedirect.value : textAlert.value
    })
    // console.log(store.componentsList)
    // 清空表单内容
    textRedirect.value = ""
    textAlert.value = ""
}
</script>

<style scoped>
.mt10 {
    margin-top: 10px;
}
</style>